<template>
  <el-form
    ref="form"
    size="small"
    inline
    :model="form"
    label-width="80px"
    :rules="rules"
  >
    <el-form-item
      prop="procInsName"
      :label="$t('flowTask.form.procInsName.title')"
    >
      <el-input
        :placeholder="
          $t('validate.pleaseFillIn', [$t('flowTask.form.procInsName.title')])
        "
        v-model="form.procInsName"
      ></el-input>
    </el-form-item>
    <el-form-item prop="name" :label="$t('flowTask.form.name.title')">
      <el-input
        :placeholder="
          $t('validate.pleaseFillIn', [$t('flowTask.form.name.title')])
        "
        v-model="form.name"
      ></el-input>
    </el-form-item>
    <el-form-item :label="$t('flowTask.form.userCode.title')">
      <el-input
        @click="dialogUser = true"
        readonly
        v-model="form.userCode"
        :placeholder="
          $t('validate.pleaseFillIn', [$t('flowTask.form.userCode.title')])
        "
      >
        <template #suffix>
          <i class="el-icon-search el-input__icon"> </i>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item :label="$t('flowTask.form.beginDate.title')">
      <el-date-picker
        v-model="beginDate"
        type="datetime"
        :placeholder="
          $t('validate.pleaseFillIn', [$t('flowTask.form.beginDate.title')])
        "
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item :label="$t('flowTask.form.status.title')">
      <el-select
        v-model="form.status"
        :placeholder="
          $t('validate.pleaseFillIn', [$t('flowTask.form.status.title')])
        "
      >
        <el-option label="待办" value="2"></el-option>
        <el-option label="已办" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label-width="'0px'">
      <el-button type="primary" @click="setQuery">
        {{ $t("button.search") }}</el-button
      >
      <el-button @click="reset"> {{ $t("button.reset") }}</el-button>
      <el-button @click="more = !more">
        {{ $t("button.more") }}
        <i class="el-icon-caret-bottom" />
      </el-button>
    </el-form-item>
    <br />
    <el-collapse-transition>
      <div v-if="more">
        <el-form-item :label="$t('flowTask.form.procDefCategory.title')">
          <el-input
            @click="dialogSelect = !dialogSelect"
            readonly
            v-model="form.procDefCategoryName"
            :placeholder="
              $t('validate.pleaseFillIn', [
                $t('flowTask.form.procDefCategory.title'),
              ])
            "
          >
            <template #suffix>
              <i class="el-icon-search el-input__icon"> </i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('flowTask.form.procDefKey.title')">
          <el-input
            :placeholder="
              $t('validate.pleaseFillIn', [
                $t('flowTask.form.procDefKey.title'),
              ])
            "
            v-model="form.procDefKey"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('flowTask.form.procInsId.title')">
          <el-input
            :placeholder="
              $t('validate.pleaseFillIn', [$t('flowTask.form.procInsId.title')])
            "
            v-model="form.procInsId"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('flowTask.form.procDefId.title')">
          <el-input
            :placeholder="
              $t('validate.pleaseFillIn', [$t('flowTask.form.procDefId.title')])
            "
            v-model="form.procDefId"
          ></el-input>
        </el-form-item> -->
      </div>
    </el-collapse-transition>
  </el-form>
  <SelectTree
    v-model:visible="dialogSelect"
    :treeData="treeData"
    @submit="submit"
    @down="down"
  />
  <User v-model:visible="dialogUser"  />
</template>

<script>
import SelectTree from "@/views/process/process-control/defineManagement/main/components/selectTree.vue";
import User from "@/views/process/components/userInfo/user.vue";

import { mapState, mapActions } from "vuex";
export default {
  provide() {
    return {
      down: this.down,
    };
  },
  data() {
    return {
      more: false,
      beginDate: "",
      dialogSelect: false,
      dialogUser: false,
      rules: {
        procInsName: [],
        name: [],
        userCode: [],
        beginDate: [],
        status: [],
        procDefCategory: [],
        procDefKey: [],
        procInsId: [],
        procDefId: [],
      },
    };
  },

  components: {
    SelectTree,
    User,
  },

  computed: {
    ...mapState({
      form: (state) => state.flowTaskStore.form,
      treeData: (state) => state.flowClassifyStore.treeData,
    }),
  },

  // mounted() {},

  methods: {
    ...mapActions("flowTaskStore", ["reset", "getFlowTaskList"]),
    setQuery() {
      if (this.beginDate) {
        this.form.beginDate = this.$dayjs.formateDate(
          this.beginDate,
          "YYYY-MM-DD hh:mm:ss"
        );
      }
      this.getFlowTaskList({
        num: 1,
        size: 10,
      });
    },
    down() {
      this.dialogSelect = false;
      this.dialogUser = false;
    },
    submit(type) {
      this.form.procDefCategory = type.code;
      this.form.procDefCategoryName = type.name;
      this.down();
    },
  },
};
</script>
<style lang="scss" scoped>
.task_content {
  .el-input {
    width: 150px;
  }
}
</style>
